import React from 'react';
import { inject, observer } from 'mobx-react';
import { WeaTableNew } from 'comsMobx';
import { toJS } from 'mobx';
import {
    WeaAlertPage, WeaCheckbox, WeaErrorPage, WeaInput, WeaLocaleProvider, WeaHelpfulTip,
    WeaSlideModal, WeaTab, WeaTag, WeaTools, WeaDialog, WeaFormItem, WeaError, WeaDropdown
} from 'ecCom';
import { Button, Pagination, SelectNew, Spin, Progress, Alert, Radio, Modal, Menu } from 'antd';
import Top from '../top-title';
import RightMenusWrap from '../right-menu-wrap';
import window, {  getListKey, addEnterFun, doGlobalSpin } from '../../util';
import Advanced from '../advanced';
import { BatchShareDialog } from '../../pages/batch-share';
import { TemplateDialog } from '../../pages/template';
import { SingleShareDialog } from '../../pages/batch-share/Single';
import { TabSetDialog } from '../modeTab/TabSetDialog';
import { listStore, SearchDisplayType } from '../../stores/list';
import MobxTable from '../mobx-table';
import CustomDialog from '../card/CustomDialog';
import { BatchmodifyfeildDialog } from './Batchmodifyfeild';
import RightLeftLayout from '../card/RightLeftLayout';
import { MapDialog } from '../../pages/map';
import { BatchAddDialog } from './batchAdd';
import Excel from './Excel';
import Tree from './Tree';
import ImgSearch from './ImgSearch';
import DataBoard from "../dataBoard";
import jQuery from 'jquery';
import $ from "jquery";
import _ from 'lodash';
import "../../style/selectcast.less"
import { UrlDocker } from '..';
import { componentComputed, customOperates,  renderSearchAdPanel ,getHeight,getContent,computeSearchAd,getScroll ,getTopLeft, isExitIconHandle} from './utils';
import QuickSearch from '../quickSearch';
import { TreeStore } from '../../stores/tree';
import ReplyStore from '../../stores/reply';
import CardStore from '../../stores/card';
import { CustomPageStore } from '../../stores/custompage';
import VerticalList from './verticalList';
import AdvancedSearchs from './AdvancedSearchs';
import ListCount from './ListCount';
import ButtonNew from '../commonComs/buttonNew';
const WeaTable = WeaTableNew.WeaTable;
const getLabel = WeaLocaleProvider.getLabel;
const RadioGroup = Radio.Group;
const MenuItem = Menu.Item;
const ButtonGroup = Button.Group;

export interface ListProps {
    Search: listStore;
    Tree: TreeStore;
    reply: ReplyStore;
    Card: CardStore;
    customPageStore: CustomPageStore;
    hideRightmenu?: boolean;
}
@inject('Search','Tree', 'Card', 'reply', "customPageStore")
@observer
class List extends React.Component<ListProps, any> {
    _tab: any;
    hideAdvancedSearchPanel: boolean = false;
    fixedHeight: any;
    countDataTimer: any;
    pageSizeOptions:any = [];

    componentDidMount() {
        const { Search } = this.props;
        const { params } = Search;
        /***涉及的一些计算的单独提出来 */
        componentComputed(Search, this.computeTableHeight);
        if (params && params.hidetop) {
            this.judgeTopHide();
        }
        (window as any).showSearchSlideModal = Search.showSlideModal;
    }

    componentWillReceiveProps(nextProps) {
        const { Search } = this.props;
        if (Search.params) {
            this.judgeTopHide();
        }
    }
    componentWillUnmount(){
        const { Search } = this.props;
        Search.clear();
    }

    quickSearch = (quickSearchValue) => {
        const { Search } = this.props;
        quickSearchValue = _.trim(quickSearchValue)
        Search.update({ quickSearchValue })
        if (Search.isEdit&&(Search.displayType === SearchDisplayType.Empty||Search.displayType===SearchDisplayType.Normal)) {
            Search.doBatchEdit_datakey(null,{},true);
        } else {
            Search.refresh(true);
        }
    }
    changeQuickSearchValue = (val) => {
        const { Search } = this.props;
        const quickSearchValue = val;
        Search.update({ quickSearchValue });
    }
    refresh = () => {
        const { Search } = this.props;
        if (!Search.isShowCondition) {
            Search.condition.update({ visible: false });
        }
        if (Search.isEdit) {
            if (Search.displayType === SearchDisplayType.Excel) {
                Search.doBatchEdit_datakey((dataKey) => {
                    Search.excelStore.getDatas(dataKey, 1);
                });
            } else {
                Search.doBatchEdit_datakey();
            }
        } else {
            Search.refresh(false,true);
        }
    }
    batchShare = () => {
        const { Search } = this.props;
        if (!Search.checkSeleted()) {
            return;
        }
    }
    judgeTopHide = () => {
        const { Search } = this.props;
        if (Search.params.hidetop) {// && Search.params.guid === 'search'严格限制为search
            let hidetop = Search.params.hidetop;
            Search.isInnerTab = hidetop && (hidetop | 0) === 1;
            this.hideAdvancedSearchPanel = hidetop && (hidetop | 0) === 1;
        }
    }
    hide = (advanced) => {
        advanced.update({ visible: false });
    }
    /* 统计 在右上角显示时，将超出部分以下拉框形式显示 type:'selectedKey'时需重新计算下拉框宽度*/
    showCountDataOnTopRight = () => {
        const { Search } = this.props;
        const { handleShowMoreCountData } = Search;
        const $topCountDataMore = jQuery('#top-countData-more');
        if ($topCountDataMore.length > 0) {
            setTimeout(function(){  // 增加延迟函数为解决 行点击事件触发右侧iframe展开 导致的页面宽度改变，避免本函数内计算时获取的仍是旧宽度的问题
                if (jQuery('#top-countData-more').length > 0) { // 再次判断，针对自定义页面weatop会先加载再隐藏的问题
                    // 恢复样式
                    jQuery('.wea-new-top .cube-list-top-countData').attr('style','');
                    jQuery('.wea-new-top .cube-list-top-countData-more').attr('style','');
                    jQuery('#top-countData-list').attr('style','');
                    $topCountDataMore.show();
                    /*  动态计算“统计项”展示的宽度  */
                    const containerWidth = $('#top-countData-more').parents(".wea-new-top").width(); // top宽度
                    const containerToLeft = $('#top-countData-more').parents(".wea-new-top").offset().left; // wea-new-top距左侧的距离
                    const topCountMoreToLeft = $('#top-countData-more').offset().left; // top-countData-more按钮距左侧的距离
                    // 计算 top右侧的快捷搜索按钮宽度和  快捷搜索按钮宽度和 = top宽度 + wea-new-top距左侧的距离 - top-countData-more按钮距左侧的距离
                    const btnsWidth = containerWidth + containerToLeft - topCountMoreToLeft;

                    const newTopTitleWidth = $('.coms-mode-search .coms-mode-top-title .ant-col-14 .wea-new-top-title').width(); // top 标题 整体宽度
                    let newTopTitleBreadcrumbWidth = $('.coms-mode-search .coms-mode-top-title .wea-new-top-title .wea-new-top-title-breadcrumb').width(); // top 标题文字宽度
                    /**
                     * 由于ie浏览器下 span内文字长度会超过span元素的宽度，而获取到的是span的宽度，因此当span内文字过长时，依然存在与右侧“统计项”重叠的问题
                     * 因此需要增加判断，当newTopTitleBreadcrumbWidth快要超过父元素newTopTitleWidth的宽度时，就采用父元素newTopTitleWidth的宽度
                     */
                    if (!$.browser.chrome && newTopTitleBreadcrumbWidth+100>newTopTitleWidth) {
                        newTopTitleBreadcrumbWidth = newTopTitleWidth;
                    }
                    // 计算top左侧标题宽度
                    const leftTitleWidth = Math.min(newTopTitleWidth, newTopTitleBreadcrumbWidth);

                    // 计算留给'统计'展示的剩余宽度  留给'统计'展示的剩余宽度 = top宽度 - top标题宽度 - 右侧快捷按钮宽度和
                    const fixedWidth = Math.min(containerWidth - leftTitleWidth, containerWidth*0.6) - btnsWidth - 60;
                    let countDataWidthSum = 0; // 所有“统计项”总宽度
                    let topCountDataWidth = 0; // 展示在top中的“统计项”总宽度
                    let index = 0; //隐藏的'统计项'数量

                    const $topCountDataList = jQuery('.wea-new-top .cube-list-top-countData'); // 水平展示'统计'项
                    const $topCountDataListMore = jQuery('.wea-new-top .cube-list-top-countData-more'); // 下拉展示'统计'项
                    // 计算'统计'项的总宽度
                    $topCountDataListMore.each(function() {
                        countDataWidthSum += jQuery(this).width();
                    });
                    if (countDataWidthSum > fixedWidth) { // 判断是否需要显示“显示更多”按钮
                        $topCountDataMore.show(); // 需要显示“显示更多”按钮
                        jQuery('#top-countData-more .icon-coms').css('visibility','visible');
                        // 当top展示的“统计项”总长度小于可展示位置的宽度，则从左至右将“统计项”显示在top中
                        while (topCountDataWidth + $topCountDataListMore.eq(index).width() + 10 < fixedWidth) {
                            topCountDataWidth += $topCountDataListMore.eq(index).width() + 10;
                            $topCountDataList.eq(index).css('display','inline-block');
                            $topCountDataListMore.eq(index).css('display','none');
                            index++;
                        }
                        // 由于ie与Chrome计算宽度的不同，ie下会出现重叠现象，因此隐藏一个统计项避免重叠
                        if (!$.browser.chrome && index > 0) {
                            index--;
                            topCountDataWidth = topCountDataWidth - $topCountDataListMore.eq(index).width() - 10;
                            $topCountDataList.eq(index).css('display','none');
                            $topCountDataListMore.eq(index).css('display','inline-block');
                        }
                    } else {
                        $topCountDataMore.hide(); // 不需要显示“显示更多”按钮
                        $topCountDataList.css('display','inline-block');
                        $topCountDataListMore.css('display','none');
                    }

                    // 调整下拉列表位置/宽度
                    jQuery('#top-countData-list').css({'width':topCountDataWidth+22, 'right':btnsWidth - 14});
                    document.addEventListener('click', () => {
                        handleShowMoreCountData(true);
                    });
                }
            },200);
        }
    }
    getSerchButtons = (advanced, hasCancel) => {
        const { Search } = this.props;
        let btns = new Array();
        btns.push(<ButtonNew type="primary" content={getLabel(197, '搜索')} onClick={this.refresh}></ButtonNew>);
        btns.push(<ButtonNew content={getLabel(2022, '重置')} id={advanced} onClick={this.reset}></ButtonNew>);
        if (this.props.Search.templateid) {
            btns.push(<Button onClick={Search.saveTemplate}>{getLabel(86, '保存')}</Button>);
        }
        if (this.props.Search.type != 'advanced' && !Search.templateid && !Search.isBackUpData) {
            btns.push(<ButtonNew content={getLabel(18418, '存为模板')} onClick={Search.template.saveAsTemplate}></ButtonNew>);
        }
        if (hasCancel) {
            btns.push(<ButtonNew content={getLabel(201, '取消')} id={advanced} onClick={this.hide}></ButtonNew>);
        }
        return btns;
    }

    reset =(advanced)=>{
        const { Search } = this.props;
        advanced.form.resetForm();
        Search.quickSearchValue='';
    }

    changeTabs = (selectedKey) => {
        const { Search } = this.props;
        const { params, top } = Search;
        Search.top.update({ selectedKey });
        Search.update({ params: {...params, groupValue: top.selectedKey} });
        if (Search.displayType === SearchDisplayType.ImgType) {
            Search.newTable.current = 1;
        }
        this.refresh();
    }
    hideAdvacedIfNoCondition = () => {
        const { Search } = this.props;
        try {
            if (Search.conditionInfo && toJS(Search.conditionInfo)[0].items && toJS(Search.conditionInfo)[0].items.length <= 0) {

                this.hideAdvancedSearchPanel = true;
            } else if (Search.conditionInfo && toJS(Search.conditionInfo)[0].items && toJS(Search.conditionInfo)[0].items.length > 0) {
                this.hideAdvancedSearchPanel = false;
            }

        } catch (e) {
        }
        //判断是否出现高级搜索，如果高级搜索中不存在条件头目，则隐藏，
    };
    getAdvancedQuickButtons = () => {
        const { Search } = this.props;
        return [
            <Button type="primary" onClick={this.refresh}>{getLabel(197, '搜索')}</Button>,
            <Button onClick={Search.advanced.form.onReset}>{getLabel(2022, '重置')}</Button>,
            <Button onClick={Search.template.saveAsTemplate}>{getLabel(18418, '存为模板')}</Button>,
        ]
    }
    getTemplateSelect = (advanced) => {
        const { Search } = this.props;
        const { isBackUpData } = Search;
        if (isBackUpData) {
            return null;
        }
        return (
            [
                <SelectNew
                    className="mode-template-select"
                    style={{ width: 'calc( 100% - 70px )', borderRadius: 0, textAlign: 'left', maxWidth: '200px' }}
                    placeholder={getLabel(23039, '选择模板')}
                    value={Search.templateid}
                    onChange={Search.changeTemplate}
                >
                    <SelectNew.Option value={''}>{''}</SelectNew.Option>
                    {
                        advanced.templates.map(t => (
                            <SelectNew.Option value={t.key}>{t.name}</SelectNew.Option>
                        ))
                    }
                </SelectNew>,
                <a style={{ width: 60, marginLeft: 10 }} onClick={Search.managerTemplate}>{getLabel(17857, '模板管理')}</a>
            ]
        )
    }

    getTopQuickButtonsArr = (buttons) => {
        const { Search } = this.props;
        const { checkBtn,  rightMenuClick, countData, countDisplayPosition, showMoreCountData,
            displayType
        } = Search;
        let butArrs: any = [];
        let arr:any = [], arrMore:any = [];
        if (countDisplayPosition === '2' && countData.length>0) { //countDisplayPosition:统计-显示位置 ['0':顶部显示、'1':顶部简约显示、'2':右上角显示]
            countData.forEach(item=>{
                arr.push(
                    <div className="cube-list-top-countData">
                        <i className={item.icon} />
                        <span className="cube-list-top-countData-title">{item.name}:</span>
                        <b>{item.countnum}</b>
                        {item.setdesc&&<WeaHelpfulTip width={"auto"} style={{ paddingLeft:'5px' }} title={item.setdesc} />}
                    </div>
                );
                arrMore.push(
                    <div className="cube-list-top-countData-more">
                        <i className={item.icon} />
                        <span className="cube-list-top-countData-title">{item.name}:</span>
                        <b>{item.countnum}</b>
                        {item.setdesc&&<WeaHelpfulTip width={"auto"} style={{ paddingLeft:'5px' }} title={item.setdesc} />}
                    </div>
                );
            });
            arr.push(
                <div id="top-countData-more" onClick={this.handleCountDataClick}>
                    <i className={showMoreCountData?'icon-coms icon-coms-up2':'icon-coms icon-coms-down2'} />
                    {/* <span className="cube-list-top-countData-title">{getLabel(387979,'加载更多')}</span> */}
                    <span id="top-countData-list" className={showMoreCountData?'showMore':''}>{arrMore}</span>
                </div>
            )
            butArrs.push(arr);
        }
        buttons && buttons.map((btn, index) => {
            let expandBtn = "expandid_" + btn.key + "span";
            if(displayType == SearchDisplayType.TreeType){//分组列表
                expandBtn = "expandid_" + btn.key;
            }
            const searchData = this.getSearchData();
            let btnDisable = (btn.isfilter == '1' && checkBtn == expandBtn &&  (searchData.length < 1 || !searchData));
            if (index < 5) {
                butArrs.push(
                    <ButtonNew  type={'primary'} content={btn.name}  id={btn.key} onClick={rightMenuClick} disabled={btnDisable}  ></ButtonNew>
                )
            }
        })
        return butArrs;
    }

    handleCountDataClick = (e) => {
        const { Search } = this.props;
        const { showMoreCountData, handleShowMoreCountData } = Search;
        e.nativeEvent.stopImmediatePropagation();
        handleShowMoreCountData(showMoreCountData);
    }

    getQuickButtons = (bool) => {
        const { Search } = this.props;
        let { rightMenus } = Search;
        const quickButtons = rightMenus.slice().filter(d => d.quickButton);
        if (bool) {
            return Search.type == 'advanced' ? this.getAdvancedQuickButtons() : this.getTopQuickButtonsArr(quickButtons);
        } else {
            window.handleQuickBtnClick = Search.rightMenuClick;
            window.handleRightMenuClick = Search.rightMenuClick;
            return Search.type == 'advanced' ?
                [
                    { type: 'primary', btnName: getLabel(197, '搜索'), param1: -1 },
                    { btnName: getLabel(2022, '重置'), param1: -2 },
                    { btnName: getLabel(18418, '存为模板'), param1: -3 }
                ] : quickButtons.map((btn, index) => {
                    if (index == 0) {
                        return {
                            type: 'primary',
                            btnName: btn.name,
                            param1: btn.key
                        }
                    }
                    return {
                        btnName: btn.name,
                        param1: btn.key
                    }
                });
        }
    }
    componentDidUpdate() {
        const { Search } = this.props;
        jQuery(document).bind('click', function (e) {
            var e = e || window.event;
            var elem = e.target || e.srcElement;
            while (elem) {
                if (elem.className && (elem.className == 'wea-left-right-layout-left'
                    || elem.className == 'e8theme-layout-header'
                    || elem.className == 'e8header-container'
                    || elem.className == 'e8header-right'
                    || elem.className == 'e8theme-layout-aside'
                    || elem.className == 'wea-left-right-layout-left'
                    || elem.className == 'cube-tree-list'
                    || elem.className == 'e9theme-layout-header'
                    || elem.className == 'e9header-container'
                    || elem.className == 'e9header-right'
                    || elem.className == 'e9theme-layout-aside'
                    || elem.className == 'wea-menu'
					|| elem.className == 'coms-mode-docker coms-mode-viewCustomPage')) {
                    Search.showSlideModal(false, "", "");
                }
                elem = elem.parentNode;
            }
        });
        if (Search.showGlobalSpin.isShow == 'hide') {
            Search.showGlobalSpin.isShow = 'none';
        }
        addEnterFun(this.refresh)
        this.computeTableHeight(Search);
        computeSearchAd(Search);
        // jQuery('.backupBtn').parent('span').css('float','right').css('margin-right','15px');
        this.handleParentIframe(); //主要针对流程iframe嵌套查询
        const { countDisplayPosition, countData } = Search;
        if (countDisplayPosition==='2' && countData.length>0) { //countDisplayPosition:统计-显示位置 ['0':顶部显示、'1':顶部简约显示、'2':右上角显示]
            this.showCountDataOnTopRight();
        }
    }

    handleParentIframe = () => {
        if (self != top) { //在iframe内部
            if ($((window as any).frameElement).attr("adjustheight") == "y") { //自适应高度
                let height = 0;
                this.fixedHeight = setInterval(() => {
                    try {
                        const iframe = $((window as any).frameElement);
                        if (iframe[0]) {
                            const perfectHeight = window.perfectHeight;
                            if (_.isFunction(perfectHeight)) {
                                const newHeight = perfectHeight();
                                if (newHeight && !isNaN(newHeight) && height != newHeight) {
                                    height = newHeight;
                                    iframe.height(newHeight);
                                    clearInterval(this.fixedHeight);
                                }
                            }
                        }
                    } catch (e) {
                        clearInterval(this.fixedHeight);
                    }
                }, 100)
            }
        }
    }
    parserColumnsForShowList = (record, num, cb, index) => {
        const {isShowIcon} = this.props.Search;
        let otherparas = cb.otherpara.split("+");
        let index1 = 0;
        for (index1; index1 < otherparas.length; index1++) {
            let islikebutton = otherparas[index1].replace("#islikebutton:", "");
            if (islikebutton && islikebutton == '1') {
                let likeinfo = otherparas[index1 + 1].replace("#likeinfo:", "")
                let type = likeinfo.split(",")[0];
                let status = likeinfo.split(",")[3];
                let likecount = likeinfo.split(",")[1];
                let dislikecount = likeinfo.split(",")[2];
                if (type == '5') {
                    if (status == '1') {
                        return <Button type="ghost" onClick={() => { this.props.Search.likeOrDislike(record, "0", index, '1') }}>
                            <span>
                                <i title={getLabel('31129', '取消') + cb.text} className={"icon-coms02-like"} />
                                { isShowIcon ? <span title={cb.text || ''}>{'(' + likecount + ')'}</span>:<span>{' ' + cb.text + '(' + likecount + ')'}</span>}
                            </span></Button>
                    } else {
                        return <Button type="ghost" onClick={() => { this.props.Search.likeOrDislike(record, "1", index, '1') }}>
                            <span>
                                <i title={cb.text} className={"icon-coms02-like-o"} />
                                { isShowIcon ? <span title={cb.text || ''}>{'(' + likecount + ')'}</span>:<span>{' ' + cb.text + ' (' + likecount + ')'}</span>}
                            </span></Button>
                    }
                } else if (type == '6') {
                    if (status == '2') {
                        return <Button type="ghost" onClick={() => { this.props.Search.likeOrDislike(record, "0", index, '1') }}>
                            <span>
                                <i title={getLabel('31129', '取消') + cb.text} className={"icon-coms02-Negative-comment"} />
                                { isShowIcon ? <span title={cb.text || ''}>{'(' + dislikecount + ')'}</span>:<span>{' ' + cb.text + ' (' + dislikecount + ')'}</span>}
                            </span></Button>
                    } else {
                        return <Button type="ghost" onClick={() => { this.props.Search.likeOrDislike(record, "2", index, '1') }}>
                            <span>
                                <i title={cb.text} className={"icon-coms02-Negative-comment-o"} />
                                { isShowIcon ? <span title={cb.text || ''}>{'(' + dislikecount + ')'}</span>:<span>{' ' + cb.text + ' (' + dislikecount + ')'}</span>}
                            </span></Button>
                    }
                }
            }
        }
        return <Button title={cb.text || ''} type="ghost" onClick={() => {
            this.props.Search.doCustomButton(record, '', cb, '')
        }}>
           { cb.icon ? <div className='cube-list-icon-box' ><img src={cb.icon} /></div> : (!isShowIcon ? '':<div className='cube-list-icon-box' ><img src={'/mobilemode/piclibrary/01-E9_default/setup.png'} /></div> )}
           {!isShowIcon ? cb.text :''}
        </Button>
    }

    parserColumnsForFunc = (record, num, cb, index, isExitIcon) => {
        let otherparas = cb.otherpara.split("+");
        let index1 = 0;
        for (index1; index1 < otherparas.length; index1++) {
            let islikebutton = otherparas[index1].replace("#islikebutton:", "");
            if (islikebutton && islikebutton == '1') {
                let likeinfo = otherparas[index1 + 1].replace("#likeinfo:", "")
                let likecount = likeinfo.split(",")[1];
                let dislikecount = likeinfo.split(",")[2];
                let type = likeinfo.split(",")[0];
                let status = likeinfo.split(",")[3];
                if (type == '5') {
                    if (status == '1') {
                        return <MenuItem>
                            <span
                                onClick={() => {
                                    this.props.Search.likeOrDislike(record, "0", index, '1');
                                }}
                            >
                                <span><i title={getLabel('31129', '取消') + cb.text} className={"icon-coms02-like"} /><span style={{ color: '#000' }}>{' ' + cb.text + '(' + likecount + ')'}</span></span>
                            </span>
                        </MenuItem>;
                    } else {
                        return <MenuItem>
                            <span
                                onClick={() => {
                                    this.props.Search.likeOrDislike(record, "1", index, '1');
                                }}
                            >
                                <span><i title={cb.text} className={"icon-coms02-like-o"} /><span style={{ color: '#000' }}>{' ' + cb.text + ' (' + likecount + ')'}</span></span>
                            </span>
                        </MenuItem>;
                    }
                } else if (type == '6') {
                    if (status == '2') {
                        return <MenuItem>
                            <span
                                onClick={() => {
                                    this.props.Search.likeOrDislike(record, "0", index, '1');
                                }}
                            >
                                <span><i title={getLabel('31129', '取消') + cb.text} className={"icon-coms02-Negative-comment"} /><span style={{ color: '#000' }}>{' ' + cb.text + ' (' + dislikecount + ')'}</span></span>
                            </span>
                        </MenuItem>;
                    } else {
                        return <MenuItem>
                            <span
                                onClick={() => {
                                    this.props.Search.likeOrDislike(record, "2", index, '1');
                                }}
                            >
                                <span><i title={cb.text} className={"icon-coms02-Negative-comment-o"} /><span style={{ color: '#000' }}>{' ' + cb.text + ' (' + dislikecount + ')'}</span></span>
                            </span>
                        </MenuItem>;
                    }
                }
            }
        }
        return <MenuItem>
            <span
               onClick={() => {
                   this.props.Search.doCustomButton(record, '', cb, '')
               }}
            >
                {isExitIcon?<div className='cube-list-icon-box'>{cb.icon?<img src={cb.icon}/>:''}</div>:''}
                <span style={{ color: '#000' }}>{cb.text}</span>
            </span>
        </MenuItem>;
    }
    dealmergecolumn=(columns)=>{
        const { Search } = this.props;
        let mergeFields =  Search.mergeFields?Search.mergeFields:'';
        let columns1:any = [];
        let columns2:any = [];//已经处理的列
        for(let n = 0;n<columns.length;n++){
            let dataindex = columns[n].dataIndex;
            if(mergeFields.indexOf(dataindex)<0){//如果不是合并列
                columns1.push(columns[n]);
            }else{//是合并列
                if(columns2.indexOf(dataindex)<0){
                    let column = this.getColumn(columns,dataindex,columns2);
                    columns1.push(column);
                    //columns2.push(dataindex)
                }
            }
        }
        return columns1;
    }
    
    getColumn(columns,dataindex,columns2){
        const { Search } = this.props;
        const {mergeInfos}=  Search;
        let maxTier = 0;
        for(let index=0;index<mergeInfos.length;index++){
            let tier = mergeInfos[index].maxTier || '0';
            if(parseInt(tier)>maxTier){
                maxTier = parseInt(tier);
            }
        }
        for (let i = 0; i < mergeInfos.length; i++) {
            if(mergeInfos[i].fields.indexOf(dataindex)>-1){
                for(let m = 0;m<mergeInfos[i].fields.length;m++){
                    columns2.push(mergeInfos[i].fields[m]);
                }
                let mergecolumn: any = {};
                mergecolumn.title = mergeInfos[i].mergename;
                mergecolumn.className = "column-text-center";
                mergecolumn.display = "true";
                mergecolumn.dataIndex = "mergeline_"+i;
                mergecolumn.oldWidth = this.getoldWidth(mergeInfos[i],columns)+'%';
                mergecolumn.children = this.getchildren(mergeInfos[i], columns,maxTier);
                return mergecolumn;
            }

        }

    }
    getSumWidth(columns){//计算列宽总和
        let sumWidth = 0;
        for(let n = 0;n<columns.length;n++){
            if(columns[n].display&&columns[n].display != "none"){
                let oldwidth = parseFloat((columns[n].oldWidth || '5').replace("%",""));
                if(oldwidth == 0){
                    oldwidth = 5;
                }
                sumWidth += oldwidth;
            }
        }
        return sumWidth;
    }
    getchildrenWidth(columns,oldwidth){//组件不处理children下column，需要先计算好列宽
        let sumWidth = this.getSumWidth(columns);
        let width = '0';
        let oldwidth1 = parseFloat((oldwidth || '5').replace("%",""));
        if(oldwidth1 == 0){
            oldwidth1 = 5;
        }
        width = Number(
            parseFloat((oldwidth1+(100-sumWidth)*parseFloat(oldwidth1/sumWidth+""))+"")
        ).toFixed(2)+"%"
        return width;
    }
    getoldWidth(mergeInfo,columns){
        let width = 0;
        let children = mergeInfo.children;
        if(children){
            for (let j=0;j<children.length;j++) {
                if (children[j].fieldname) {
                    let fieldname = children[j].fieldname;
                    for (let i = 0; i < columns.length; i++) {
                        if (fieldname == columns[i].dataIndex) {
                            let childrenOldWidth = parseFloat(columns[i].oldWidth || '0')
                            width = width+childrenOldWidth;
                        }
                    }
                }else{
                    width = width+this.getoldWidth(children[j],columns);
                }
            }
        }
        return width;
    }
    getchildren(mergeInfo, columns,maxTier) {
        let children = mergeInfo.children;
        let childrens: any =[];
        if (children) {
            for (let j=0;j<children.length;j++) {
                let childreninfo :any = {}
                if (children[j].fieldname) {
                    let fieldname = children[j].fieldname;
                    for (let i = 0; i < columns.length; i++) {
                        if (fieldname == columns[i].dataIndex) {
                            let fieldTier = children[j].fieldTier || '0';
                            if(parseInt(fieldTier)<maxTier){
                                let rowSpan = maxTier-parseInt(fieldTier)+1;
                                columns[i].rowSpan = rowSpan+'';
                            }
                            columns[i].title = (<span title={columns[i].title} className="ant-table-column-sorterN text-elli">
                            {columns[i].title}
                            </span>)
                            columns[i].width = this.getchildrenWidth(columns,columns[i].oldWidth);
                            childreninfo = columns[i];
                            break;
                        }
                    }
                } else {
                    childreninfo.title = children[j].mergename;
                    childreninfo.className = "column-text-center";
                    childreninfo.display = "true";
                    let oldWidth = this.getoldWidth(children[j],columns)+'%';
                    childreninfo.width = this.getchildrenWidth(columns,oldWidth);
                    childreninfo.children = this.getchildren(children[j], columns,maxTier)
                }
                childrens.push(childreninfo);
            }

        }
        return childrens;
    }
    parseColumns = (columns) => {
        const { Search } = this.props;
        const { isSuspend,isShowIcon,showButtomNum }=  Search;

        let columns1 = columns.map((col) => {
            let flag = true;
            let oldwidth = col.oldWidth || '5%';
            if (oldwidth.indexOf("px") < 0 && col.dataIndex != 'randomFieldId') {
                flag = false;
                let widthInt = parseFloat(oldwidth.replace('%', ''));
                if (widthInt <= 0) {
                    widthInt = 5;
                }
                col.oldWidth = `${widthInt}%`;
            }
            if (col.dataIndex == 'randomFieldId' && flag) {
                col.oldWidth = `100px`;
            }

            if (col.dataIndex == 'modelableid') {//如果是标签
                let newColumn = col;
                let classname: any = col.className == 'column-text-right' ? 'right' : col.className == 'column-text-center' ? 'center' : 'left';
                newColumn.render = (text, record, index) => { //前端元素转义
                    let valueSpan = record[newColumn.dataIndex + "span"] !== undefined ? record[newColumn.dataIndex + "span"] : record[newColumn.dataIndex];
                    let weatag = valueSpan && JSON.parse(valueSpan).map(tag => {
                        if (tag.tabname != '') {
                            return <WeaTag title={tag.tabname} style={{
                                borderRadius: '4px',
                                marginBottom: 2,
                                marginRight: 10,
                                color: tag.color,
                                backgroundColor: tag.bgcolor,
                                borderColor: tag.bdcolor
                            }}>
                                {tag.tabname.length > 10 ? `${tag.tabname.slice(0, 10)}...` : tag.tabname}
                            </WeaTag>
                        } else {
                            return tag + " ";
                        }
                    });
                    return <div>
                        <div style={{ textAlign: classname, whiteSpace: 'normal' }}>{weatag}</div>
                    </div>
                }
                return newColumn;
            } else if (col.className && col.className.indexOf("checkBox") > 0) {//是checkbox
                let newColumn = col;
                let classname: any = col.className == 'column-text-right checkBox' ? 'right' : col.className == 'column-text-center checkBox' ? 'center' : 'left';
                newColumn.render = (text, record, index) => { //前端元素转义
                    if (!record._stat) {//排除合计
                        let valueSpan = record[newColumn.dataIndex + "span"] !== undefined ? record[newColumn.dataIndex + "span"] : record[newColumn.dataIndex];
                        if (valueSpan != '0' && valueSpan != '1' && valueSpan != '') {//被转换 去除条件record[newColumn.dataIndex]!=''&&，当check框为空时也显示转换
                            return <span dangerouslySetInnerHTML={{ __html: valueSpan }}></span>;
                        } else {
                            return <div style={{ textAlign: classname, whiteSpace: 'normal' }}>
                                <WeaCheckbox  viewAttr='1' id={valueSpan}  value={valueSpan}></WeaCheckbox>
                            </div>
                        }
                    }
                }
                return newColumn;
            } else if (col.dataIndex == 'isshowlist') {//如果是自定义按钮
                let newColumn = col;
                let classname: any = col.className == 'column-text-right' ? 'right' : col.className == 'column-text-center' ? 'center' : 'left';
                newColumn.render = (text, record, index) => {
                    let valueSpan: any = record[newColumn.dataIndex + "span"] !== undefined ? record[newColumn.dataIndex + "span"] : record[newColumn.dataIndex];
                    let num = -1;
                    let count = valueSpan && JSON.parse(valueSpan).length;
                    let custombutton;
                    let custombuttonArray;
                    if (count > showButtomNum && !isShowIcon) {
                        if(showButtomNum>0){
                            let valueSpanarrry = JSON.parse(valueSpan).slice(0, showButtomNum);
                            let valueSpanTemp = JSON.parse(valueSpan).slice(showButtomNum-1);

                            const isExitIcon = isExitIconHandle('opt', valueSpanTemp);
                            custombuttonArray = valueSpanTemp && valueSpanTemp.map(cb => {
                                return this.parserColumnsForFunc(record, num, cb, index, isExitIcon);
                            });
                            custombutton = valueSpanarrry && valueSpanarrry.map(cb => {
                                num++;
                                if (num < showButtomNum-1) {
                                    return this.parserColumnsForShowList(record, num, cb, index);
                                } else if (num == showButtomNum-1) {
                                    return (
                                        <WeaDropdown
                                            className='wea-table-page-more-drop-down'
                                            getPopupContainer={() => document.getElementById("buttonGroupbtn"+index)}
                                            overlay={
                                                <Menu>
                                                    {custombuttonArray}
                                                </Menu>
                                            }>
                                            {getLabel(17499, "更多")}
                                        </WeaDropdown>
                                    );
                                }
                            });
                        }else{
                            let valueSpanTemp = JSON.parse(valueSpan).slice(0);
                            const isExitIcon = isExitIconHandle('opt', valueSpanTemp);
                            custombuttonArray = valueSpanTemp && valueSpanTemp.map(cb => {
                                return this.parserColumnsForFunc(record, num, cb, index, isExitIcon);
                            });
                            return <div onClick={e=>e.stopPropagation()}>
                                    <div  id={"buttonGroupbtn"+index} className={`cube-list-table-cusoperate ${isSuspend? 'cusoperate-hidden':"cusoperate-visible"}`} style={{ textAlign: classname, whiteSpace: 'normal' }}>
                                        <ButtonGroup>
                                            <WeaDropdown
                                                className='wea-table-page-more-drop-down'
                                                getPopupContainer={() => document.getElementById("buttonGroupbtn"+index)}
                                                overlay={
                                                    <Menu>
                                                        {custombuttonArray}
                                                    </Menu>
                                                }>
                                                {getLabel(17499, "更多")}
                                            </WeaDropdown>
                                        </ButtonGroup>
                                    </div>
                                </div>
                        }

                        return <div onClick={e=>e.stopPropagation()}>
                                    <div  id={"buttonGroupbtn"+index} className={`cube-list-table-cusoperate ${isSuspend? 'cusoperate-hidden':"cusoperate-visible"}`} style={{ textAlign: classname, whiteSpace: 'normal' }}>
                                        <ButtonGroup>{custombutton}</ButtonGroup>

                                    </div>
                                </div>
                    } else {
                        custombutton = valueSpan && JSON.parse(valueSpan).map(cb => {
                            num++;
                            return this.parserColumnsForShowList(record, num, cb, index);
                        });
                        return <div className={isShowIcon ? 'cube-list-table-cusoperate-onlyicon':'cube-list-table-cusoperate-andicon'} onClick={e=>e.stopPropagation()}>
                            <div className={`cube-list-table-cusoperate ${isSuspend? 'cusoperate-hidden':"cusoperate-visible"}`} style={{ textAlign: classname, whiteSpace: 'normal' }}>
                                <ButtonGroup className="cube-custom-btn-group">{custombutton}</ButtonGroup>
                            </div>
                        </div>
                    }
                }
                return newColumn;
            }
            return col;
        })
        columns1 = this.dealmergecolumn(columns1);
        return columns1;
    }
    tableWidth = (_?: any) => {
        const { Search } = this.props;
        return Search.originalTableWidth;
    }

    closeMsgConfirm = () => {
        this.props.Search.openMsgConfirm(false);
    };
    onContinueEdit = () => {
        this.props.Search.onBatchEditSave(true);
    };
    onBatchEditBack = () => {
        this.props.Search.onBatchEditSave(false);
    };

    render() {
        const { Search } = this.props;
        let { verified, hasRight, isCharts, windowTitle, checkLoading, backupDataLoading, showGlobalSpin } = Search;
        if (windowTitle != '') {
            document.title = windowTitle;
        }
        if (showGlobalSpin.isShow !== 'none') {
            doGlobalSpin(showGlobalSpin);
        }
        this.hideAdvacedIfNoCondition();
        if (verified && !hasRight) {
            return (<WeaAlertPage>
                    <div style={{ color: '#000' }}>
                        {getLabel(2012, '对不起，您暂时没有权限！')}
                    </div>
                </WeaAlertPage>
            )
        }
        let returnDiv=<div></div>;
        if (verified && hasRight) {

            //行点击事件
            if(!_.isEmpty(Search.rowClick)&&Search.rowClick['4']){
                let isCube=false;
                if (Search.rightLayoutHref.indexOf("/spa/cube/index.html") >= 0||Search.rightLayoutHref.indexOf("/spa/cube/index.jsp") >= 0) {
                    isCube = true;
                }

                returnDiv= <Spin tip={getLabel(513100, "正在筛选符合条件数据中...")} spinning={checkLoading} size='large'>
                    <RightLeftLayout
                        visible={false}
                        leftCom={this.getlistCompent()}
                        iconClass={"icon-coms-Right"}
                        rightCom={!Search.rightLayoutWidth.startsWith('0')?(isCube?<UrlDocker
                            url={Search.rightLayoutHref}
                            Card={this.props.Card}
                            Search={this.getSearch()}
                            Tree={this.props.Tree}
                            Reply={this.props.reply}
                            ViewCustomPage={this.props.customPageStore}
                        />:<iframe style={{
                            height: window.innerHeight,
                            width: '100%',
                            borderLeft: '1px solid #dad8d8',
                            borderTop: '0px solid #dad8d8',
                            borderBottom: '0px solid #dad8d8'
                        }} src={Search.rightLayoutHref}></iframe>):<div></div>}
                        canDrag={true}
                        iconParentStyle={{top:'200px',left:'0px',padding:'0px',borderRadius:'0px 4px 4px 0px',background:'url(/spa/portal/images/synergy/right.png) center center no-repeat',width:'16px',height:'60px'}}
                        rightLayoutWidth={Search.rightLayoutWidth}
                        showOrCloseExpand={this.showOrCloseExpand}
                    />
                </Spin>
            }else{
                returnDiv=isCharts ?
                    <Spin tip={getLabel(513100, "正在筛选符合条件数据中...")} spinning={checkLoading} size='large'>
                        <RightLeftLayout
                            visible={false}
                            bottomHeight={window.outerHeight}
                            leftCom={this.getlistCompent()}
                            iconClass={"icon-coms-Advice"}
                            rightCom={<iframe id="iframeChart" style={{
                                height: window.outerHeight - 100,
                                width: window.outerWidth * 0.35 - 10,
                                borderLeft: '1px solid #dad8d8',
                                borderTop: '0px solid #dad8d8',
                                borderBottom: '0px solid #dad8d8'
                            }} src={'/formmode/search/ChartsView.jsp?customid=' + Search.customId}></iframe>}
                        />
                    </Spin>
                    : <Spin tip={backupDataLoading ? "" : getLabel(513100, "正在筛选符合条件数据中...")}
                            spinning={checkLoading || backupDataLoading} size='large'>
                        {this.getlistCompent()}
                    </Spin>
            }
        }
        return <div id={`cube_search_${Search.customId}`}>{returnDiv}</div>;
    }


    onClick = () =>{
        const { Search} = this.props;
        Search.backUpData()
    }
    setAdcancAction =(bool) => {
        const { Search} = this.props;
        Search.condition.update({ visible: bool })
        if (bool) {
            renderSearchAdPanel(Search);
        }
    }
    onClose = (v)=>{
        const { Search} = this.props;
        (window as any).console && console.log("Search.checkAdvanedData:", Search.checkAdvanedData);
    }
    cancelExport=() => {   //取消导出
        const { Search} = this.props;
        Search.cancelExport()
    }
    showProIsclose=() => {
        const { Search} = this.props;
        Search.isClose = true;
        Search.showProgerss = false
    }
    weaSlidClose=() => {
        const { Search} = this.props;
        Search.showSlideModal(false, "", "")
    }
    weashowSlideModal=() => {
        const { Search} = this.props;
        Search.showSlideModal(false, "", "")
    }
    onComponentDidUpdate=() => {
        const { Search} = this.props;
        if(Search.slideModalVisible){
            this.componentDidUpdate();
        }
    }

    getlistCompent = () => {
        const { Search, hideRightmenu } = this.props;
        let {  hasKeySearch, keySearchFields, quickSearchData, countData, countDisplayPosition, slideModalVisible,
            isfrontmultlang,displayType ,mergeFields, mergeInfos, top:{ tabs = [] }} = Search;
        const newTabs = tabs;
        let className = "cube-list-table";
        let isMergeLine = false;
        if(mergeFields && mergeInfos && mergeInfos.length>0){
            isMergeLine=true;
            className = "cube-list-table mergeLine";
        }
        let newRightmenus: any = this.getNewRightmenus();

        //分页选项值处理
        let len = 0;
        _.forEach(Search.editPagination.pageSizeOptions,(d,index)=>{
            this.pageSizeOptions[index] = d;
            len = index;
        });
       this.pageSizeOptions.splice(len+1);

        const hasSearch = Search.conditionInfo && Search.conditionInfo.length > 0 && Search.conditionInfo[0].items.length > 0;
        let havetab = newTabs.length > 0 || hasSearch && !this.hideAdvancedSearchPanel;
        const fromStyle = this.getFormStyle();
        /***获取当前布局的top和left距离 */
        const topLeft = getTopLeft();
        let scrollheigth = document.documentElement.clientHeight - topLeft.top;
        let scrollwidth = document.documentElement.clientWidth - topLeft.left;
        let classnameval = slideModalVisible ? "div-Cube-WeaSlideModalblock" : "div-Cube-WeaSlideModalnone";
        /* 关键字搜索框增加title属性 */
        $(".wea-tab-right .wea-input-focus input").attr('title', keySearchFields);
        // this.computeTableHeight(Search);
        return (
            <div onClick={this.weashowSlideModal} onBlur={this.onComponentDidUpdate}  style={{ height: "100%" }}>
                <RightMenusWrap
                    rightMenus={newRightmenus}
                    rightMenuClick={Search.rightMenuClick}
                    hideRightmenu={hideRightmenu}
                >
                    <Top
                        top={Search.top}
                        topType="tabs"
                        loading={Search.loading}
                        showDropIcon={true}
                        dropMenuDatas={newRightmenus}
                        onDropMenuClick={Search.rightMenuClick}
                        refresh={this.refresh}
                        searchType={Search.isShowCondition ? 'base' : 'advanced'}
                        advanced={Search.type == 'advanced'}
                        buttons={this.getQuickButtons}
                        isInnerTab={Search.isInnerTab}
                        iconInfo={Search.iconInfo}
                    >
                        {
                            undefined != Search.checkAdvanedData && Search.checkAdvanedData != '' ?
                            <Alert message={toJS(Search.checkAdvanedData)}
                                   type="warning"
                                   closable
                                   onClose={this.onClose}
                            /> : ''
                        }
                        {
                            Search.isInit && (Search.type == 'advanced' ?
                            <Advanced
                                advanced={Search.advanced}
                                content={<AdvancedSearchs form= {Search.advanced.form} conditioninfo={Search.advancedInfo} customComponent={this.getTemplateSelect(Search.advanced)} quickSearch={this.refresh} listStore={Search} />}
                                buttons={this.getSerchButtons(Search.advanced, false)}
                            />
                            :
                            <div className="cube-list-wrapper" style={fromStyle}>
                                {[
                                    (newTabs.length > 0 || hasSearch && !this.hideAdvancedSearchPanel || Search.isBackUpData) &&
                                    <WeaTab
                                        ref="_tabs"
                                        datas={newTabs}
                                        keyParam="key"  //主键
                                        countParam="key" //数量
                                        counts={Search.top.groupCount}
                                        searchType={hasSearch ? (hasKeySearch ? ['base', 'advanced'] : ['advanced']) : []}
                                        selectedKey={Search.top.selectedKey}
                                        onChange={this.changeTabs}
                                        searchsBaseValue={Search.quickSearchValue}
                                        advanceHeight={'auto'}
                                        showSearchAd={Search.condition.visible}
                                        setShowSearchAd={this.setAdcancAction}
                                        replaceLeft={newTabs.length <= 0 &&
                                            quickSearchData.isquicksearch &&
                                            <QuickSearch
                                                datas={quickSearchData.quicksearchinfo}
                                                listStore={Search}
                                                onChange={this.onChange}
                                            />}
                                        buttonsAd={this.getSerchButtons(Search.condition, true)}
                                        searchsAd={Search.condition.visible ?
                                            <AdvancedSearchs form= {Search.condition.form} conditioninfo={Search.conditionInfo} customComponent={this.getTemplateSelect(Search.condition)} quickSearch={this.refresh} listStore={Search} />
                                            : ""}
                                        leftStyle={this.leftStyle()}
                                        onSearchChange={this.changeQuickSearchValue}
                                        onSearch={this.quickSearch}
                                        searchsBasePlaceHolder={keySearchFields.join(' or ')}
                                        searchsBasePlaceHolderExtra={keySearchFields.join(' or ')}
                                        buttons={this.getWeaTabBtns()}
                                    />,
                                    <div>
                                        {
                                            (newTabs.length > 0 || !havetab) && quickSearchData.isquicksearch &&
                                            <QuickSearch
                                                datas={quickSearchData.quicksearchinfo}
                                                listStore={Search}
                                                onChange={this.onChange}
                                            />
                                        }
                                    </div>,
                                    Search.isEdit ?
                                        (Search.displayType === SearchDisplayType.Excel ?
                                            <div>
                                                <div id="excelDiv" style={{ position: "relative" }}>
                                                    <Excel store={Search}></Excel>
                                                </div>
                                                <div style={{ float: 'right', margin: '7px', marginBottom: 0 }}>
                                                    <Pagination
                                                        {...Search.editPagination}
                                                        onChange={this.excelPageChange}
                                                        onShowSizeChange={this.excelPageShowSizeChange}
                                                    />
                                                </div>
                                            </div>

                                            : Search.editTableStore.isInit && <Spin
                                                style={!Search.editTableStore.isDataLoaded ? { marginTop: '200px' } : {}}
                                                spinning={Search.loading}
                                            >
                                            {
                                                Search.editTableStore.isDataLoaded &&
                                                <MobxTable
                                                    tableStore={Search.editTableStore}
                                                    isMergeLine = {isMergeLine}
                                                    scroll={getScroll(Search)}
                                                    pagination={false}
                                                    isRowSelection={false}
                                                    isNoSwitchEditStatus={true}
                                                    isfrontmultlang={isfrontmultlang}
                                                />
                                            }
                                            {
                                                Search.editTableStore.isDataLoaded &&
                                                <div style={{ float: 'right', margin: '7px' }}>
                                                    <Pagination {...Search.editPagination}
                                                        onChange={this.excelPageChange}
                                                        onShowSizeChange={this.excelPageShowSizeChange}
                                                    />
                                                </div>
                                            }
                                        </Spin>)
                                        :
                                        <div>
                                            {
                                                countDisplayPosition!=='2'&&countData.length > 0 &&
                                                <ListCount Search={Search} />
                                            }
                                            {
                                                (Search.displayType === SearchDisplayType.ImgType) ?
                                                    <div>
                                                        <div id="imgSearchDiv" style={{ position: "relative" }}>
                                                            <ImgSearch store={Search}></ImgSearch>
                                                        </div>
                                                        <div style={{ float: 'right', margin: '7px' }}>
                                                            <Pagination
                                                                current={Search.newTable.current}
                                                                pageSize={Search.newTable.pageSize}
                                                                total={Search.newTable.count}
                                                                showTotal={total => ` ${getLabel(18609,"共")+total+' '+getLabel(18256,"条")} `}
                                                                showSizeChanger
                                                                showQuickJumper
                                                                pageSizeOptions={this.pageSizeOptions}
                                                                onChange={this.imgPageChange}
                                                                onShowSizeChange={this.imgPageShowSizeChange}
                                                            />
                                                        </div>
                                                    </div>
                                                    :
                                                    (Search.displayType === SearchDisplayType.TreeType && Search.isTree) ?
                                                        <Tree store={Search}></Tree>
                                                        : Search.displayType === SearchDisplayType.Excel ?
                                                            <div>
                                                                <div id="excelDiv" style={{ position: "relative" }}>
                                                                    <Excel store={Search}></Excel>
                                                                </div>
                                                                <div style={{ float: 'right', margin: '7px' }}>
                                                                    <Pagination
                                                                        {...Search.editPagination}
                                                                        onChange={this.excelPageChange}
                                                                        onShowSizeChange={this.excelPageShowSizeChange}
                                                                    />
                                                                </div>
                                                            </div>
                                                        :
                                                        (displayType ===  SearchDisplayType.VerticalType) ?  //纵向列表的时候纵向展示
                                                                <VerticalList store={Search} />
                                                                : <WeaTable
                                                                    className={className}
                                                                    register_table={Search.register_table}
                                                                    comsWeaTableStore={Search.newTable}
                                                                    getColumns={this.parseColumns}
                                                                    needScroll={true}
                                                                    heightSpace={10}
                                                                    tableWidth={this.tableWidth}
                                                                    rowKey={getListKey}
                                                                    hasOrder={true}
                                                                    customOperates={this.tableCustomOperate}
                                                                    expiredRefreshFun={Search.refresh} //组件库说暂时不上了
                                                                    needRowClick={true}
                                                                    pageSizeOptions={this.pageSizeOptions}
                                                                    onRowClick={this.normalTableRowClick}
                                                                />

                                            }
                                        </div>
                                ]}
                            </div>)
                        }
                        <BatchShareDialog
                            iconInfo={Search.iconInfo}
                            share={Search.share}
                            params={this.getParams()}
                            success={this.refresh}/>
                        <SingleShareDialog
                            iconInfo={Search.iconInfo}
                            share={Search.share}
                            formId={Search.formId}
                            modeId={Search.modeId}
                            nonDefaultShared={Search.nondefaultshared}
                            defaultShared={Search.defaultshared}
                            type='0'
                        />
                        <TemplateDialog template={Search.template} params={Search}/>
                        <TabSetDialog Search={Search} />
                        <CustomDialog customDialog={Search.customDialog} iconInfo={Search.iconInfo}/>
                        <BatchmodifyfeildDialog batchEditStore={Search.batchEditStore} iconInfo={Search.iconInfo}/>
                    </Top>
                    <div className={classnameval} onClick={this.weashowSlideModal}></div>
                    {!Search.isInSearch&&<div onClick={(e) => e.stopPropagation()} className={"Cube-WeaSlideModal"}>
                        <WeaSlideModal visible={slideModalVisible}
                                       top={topLeft.top + "px"}
                                       width={(scrollwidth * parseFloat(Search.sliderPercentage) / 100) + "px"}
                                       height={scrollheigth + "px"}
                                       direction={'right'}
                                       measure={''}
                                       style={{ overflowY: "hidden" }}

                                       content={(
                                           <iframe src={Search.slideModalUrl} name={"iframe_" + new Date().getTime()}
                                                   style={{ border: "0", height: "100%", width: "100%" }}></iframe>
                                       )}
                                       onClose={this.weaSlidClose}
                                       //onAnimationEnd={() => { }}
                                       />
                    </div>}
                </RightMenusWrap>
                <MapDialog cubeMap={Search.cubeMap} onCancel={this.mapDialogClose} iconInfo={Search.iconInfo}/>
                <BatchAddDialog batchAddStore={Search.batchAddStore}></BatchAddDialog>
                {Search && Search.dataBoard ?
                    <DataBoard search={Search}/>
                    : null
                }
                <div style={{ display: "none" }}>
                    <iframe id="cube-list-exportfile" name="cubeListExportfile" frameBorder="no" width="100%"
                            height="100%" scrolling="auto" src="about:blank"></iframe>
                </div>
                <WeaDialog
                    style={{ width: 600, height: 90 }}
                    onCancel={this.exportCancel}
                    icon={Search.iconInfo.icon}
                    iconBgcolor={Search.iconInfo.iconBg}
                    iconFontColor={Search.iconInfo.iconColor || "#fff"}
                    title={getLabel('508300', '导出进度')}
                    visible={Search.showProgerss}
                    buttons={[<Button key="cancel" type="ghost" onClick={this.cancelExport}>{getLabel(201, "取消")}</Button>,
                        <Button key="back" type="ghost" onClick={this.showProIsclose}>{getLabel(309, "关闭")}</Button>]}
                >
                    <div style={{ padding: "15px 25px" }}>
                        <div style={{ lineHeight: "30px", textAlign: 'left' }}>
                            {getContent(Search)}
                        </div>
                        {(Search.progress.step == 'expSheet' || Search.progress.step == 'expcard') &&
                        <Progress percent={Search.progress.percent || 0}/>}
                    </div>
                </WeaDialog>
                <WeaDialog
                    style={{ width: 600, height: 135 }}
                    // onCancel={() => {
                    //     Search.isClose = true;
                    //     Search.isDelShow = false
                    // }}
                    // icon={Search.iconInfo.icon}
                    // iconBgcolor={Search.iconInfo.iconBg}
                    // title={"删除进度"}
                    closable={false}
                    visible={Search.isDelShow}
                >
                    <div style={{ padding: "15px 25px" }}>
                        <div style={{ lineHeight: "30px", textAlign: 'left' }}>
                            {getLabel(516336, "删除进度")}
                        </div>
                        {<Progress percent={Search.delLoadingProgress.percent || 0}/>}
                    </div>
                </WeaDialog>
                {Search.showExpList && this.showModal()}
                <WeaDialog
                    title={getLabel(131329,'信息确认') }
                    icon="icon-coms02-Warning-01"
                    className='cube-batch-msg'
                    visible={Search.msgConfirmVisible}
                    style={{ width: 462, height: 80 }}
                    buttons={[<Button type="primary" onClick={this.onContinueEdit}>{getLabel(522116, "保存后继续修改")}</Button>,
                        <Button type="primary" onClick={this.onBatchEditBack}>{getLabel(522117, "保存后返回")}</Button>,
                        <Button type="ghost" onClick={this.closeMsgConfirm}>{getLabel(31129,'取消')}</Button>]}
                    onCancel={this.closeMsgConfirm}
                >
                    <p className="cube-batch-msg-info">{getLabel(522118, "是否确定批量保存？")}</p>
                </WeaDialog>
            </div>
        )
    }




    computeTableHeight = (Search) => {//计算table可用高度，设为max-height
        getHeight(Search);

    }




    //nosearch 是否需要查询(单行文本的变动不需要进行查询)
    onChange = (fieldid, value, nosearch?) => {
        const { Search } = this.props;
        let { quickSearchFormData, quickSearchData } = Search;
        let { quicksearchinfo = [] } = quickSearchData;
        _.set(quickSearchFormData, fieldid, value)
        let resetDate = {} as any;
        //默认值与选择值的筛选，当选择值后，默认值就不会上传，以选择值为主
        quicksearchinfo.map(item => {
            if (!quickSearchFormData[item.fieldid] && quickSearchFormData[item.fieldid] != '') {
                if (item.value && item.value != "") {
                    resetDate[item.fieldid] = item.value;
                } else if (item.fieldhtmltype == "1" && item.fieldtype != '1') {   //浮点数整数单独解析
                    const { options } = item;
                    options.map(key => {
                        const { selected } = key;
                        if (selected) {
                            resetDate[item.fieldid] = key.key;
                        }
                    });
                } else if (item.fieldhtmltype == "3" && item.fieldtype != '1' && item.fieldtype != '2' && item.fieldtype != '19' && item.fieldtype != '290') {   //浏览框也单独解析
                    const { replaceDatas } = item;
                    let ids = "";
                    replaceDatas && replaceDatas.map(rep => {
                        const { id } = rep;
                        ids += id + ",";
                    });
                    ids = ids.substring(0, ids.length - 1);
                    resetDate[item.fieldid] = ids;
                }
            }
            if (item.fieldid == fieldid && item.fieldhtmltype == '5' && item.fieldtype == '1') {
                Search.changeQuickSearchData(item.domkey[0])
            }
        });
		//存在页面扩展关联字段，则需要取关联字段的值QC944386
        let linkParams = {};
        let linkFields = Search.copyDataSource && Search.copyDataSource.linkFields || '';
        if (linkFields) {
            linkParams = {
                [linkFields]: Search.copyDataSource[linkFields],
                linkFields: linkFields
            }
        }
        if (!nosearch) {
            let parm = {
                isQuickSearch: "1",
                customid: Search.customId,
                groupValue: Search.top.selectedKey,
                ...Search.quickSearchFormData,
				...linkParams,
                ...resetDate,
                isOnlyQuick: '1'
            }
            Search.searchTree.current = 1;
            if (Search.isEdit) {
                if (Search.displayType === SearchDisplayType.Excel) {
                    Search.doBatchEdit_datakey((dataKey) => {
                        Search.excelStore.getDatas(dataKey, 1);
                    }, parm, true);
                } else {
                    Search.doBatchEdit_datakey('', parm, true);
                }
            } else {
                Search.dataKey(parm);
            }
        }
    }
    selectOnChange = (fieldid, value) => {
        const { Search } = this.props;
        let formParams = Search.condition.form.getFormParams();//QC699153,选择框快捷搜索时将值传到高级查询条件中
        _.set(formParams, "con_" + fieldid, value)
        Search.condition.form.updateFields(formParams, false);
    }
    quickSearchClick = () => {
        const { Search } = this.props;
        let parm = {
            isQuickSearch: "1",
            customid: Search.customId,
            groupValue: Search.top.selectedKey, ...Search.quickSearchFormData
        }
        if (Search.isEdit) {
            if (Search.displayType === SearchDisplayType.Excel) {
                Search.doBatchEdit_datakey((dataKey) => {
                    Search.excelStore.getDatas(dataKey, 1);
                });
            } else {
                Search.doBatchEdit_datakey();
            }
        } else {
            Search.dataKey(parm);
        }
    }




    getExpContent = () => {
        const { Search } = this.props;
        const { expCardParm } = Search;
        const { datas = [], expcardname } = expCardParm;
        return (
            <div style={{ minHeight: 100, maxHeight: 400, overflow: "scroll", textAlign: 'center', }}>
                {datas && datas.length > 0 ? <RadioGroup
                    onChange={(e) => {
                        localStorage.setItem("cube_export_type", e.target.value);
                    }}
                    defaultValue={datas[0]['key'] || ""}
                >
                    {this.getRadioGroup(datas)}
                </RadioGroup> : ''}
                {expcardname && expcardname.key == "1" ? <WeaFormItem
                    style={datas.length > 1 ? { top: '0px' } : { top: '30px' }}
                    label={getLabel(17517, '文件名称')}
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 16 }}
                    width={"20%"}
                >
                    <div>
                        <WeaError tipPosition='top' error={getLabel(17517, '文件名称') + getLabel(21423, "未填写")}
                                  style={{ width: "100%" }} ref="filenameref"
                        >
                            <WeaInput value={expcardname.showname} width={"60%"} onChange={(e) => {
                                localStorage.setItem("cube_export_name", e);
                            }}/>
                        </WeaError>
                    </div>
                </WeaFormItem> : ""}
            </div>
        );
    }
    getRadioGroup = (datas = []) => {
        const radioArr: any = [];
        const radioStyle = {
            display: 'block',
            height: '30px',
            lineHeight: '30px',
            marginLeft: "10px",
        };
        for (let i = 0; i < datas.length; i++) {
            const item: any = datas[i];
            radioArr.push(<Radio style={radioStyle} key={item.key} value={item.key}>{item.showname}</Radio>)
        }
        return radioArr;
    }

    showModal = () => {
        const { Search } = this.props;
        if (Search.showExpList) {
            return <Modal
                title={<span><div className='wea-browser-single-icon-circle' style={{ background: "#96358a" }}><i className='icon-coms-ModelingEngine'/></div>{getLabel(17416, '导出')}</span>}
                visible={Search.showExpList}
                width={400}
                wrapClassName="expOpenDialog"
                onOk={this.showExpListOnoK}
                onCancel={this.showExpListOnCancel}
            >
                {this.getExpContent()}
            </Modal>
        }
    }

    showExpListOnCancel = () => {
        const { Search } = this.props;
        Search.showExpList = false
    }

    showExpListOnoK = () => {
        const { Search } = this.props;
        const { expCardParm } = Search;
        const { billsid, modeid, type, expcardname, comefrom, dataKey, modeCustomid, callBack } = expCardParm;
        let { isExpOne = '', key } = expcardname;
        const that = this;
        if (key == '1' && localStorage.getItem("cube_export_name") == '') {
            that.refs.filenameref["showError"]();
            return;
        }
        Search.showExpList = false;
        if (type === "list") {
            if (localStorage.getItem("cube_export_type") == "list" || isExpOne == "1") {   //如果选择的是列表EXCEL列表文件，走老的导出   ,当后台设置了一种导出类型的时候直接导出
                let excelName = localStorage.getItem("cube_export_name");
                typeof callBack == "function" && callBack(billsid, excelName);
                return;
            }
            let parm = {
                action: "expbatchcard",
                fileType: localStorage.getItem("cube_export_type"),
                billids: billsid,
                modeId: modeid,
                excelName: localStorage.getItem("cube_export_name"),
                comefrom: comefrom,
                modeCustomid: modeCustomid,
                dataKey: dataKey
            }
            Search.doExcelExpost('', '', parm);
        }
        setTimeout(() => {
            localStorage.setItem("cube_export_type", "");
            localStorage.setItem("cube_export_name", "");
        }, 500)
    }

    tableCustomOperate=(record, index, operates)=>{
        const { Search } = this.props;
        return customOperates(record, index, operates, Search);
    }

    mapDialogClose=()=>{
        const { Search } = this.props;
        Search.showCubeMap(false)
    }

    getParams=()=>{
        const { Search } = this.props;
        return { ...Search.params, customid: Search.customId, modeid: Search.modeId }
    }

    getSearchData =()=>{
        const {Search,} = this.props;
        let { displayType } = Search;
        let treeData = Search.isTreeType == '1' ? Search.newTable.selectedRowKeysAllPages : Search.selectedRowKeys;//组合查询
        const data = displayType == SearchDisplayType.ImgType ? Search.selectRowkeys  
                                                            : displayType == SearchDisplayType.TreeType ? treeData 
                                                                : displayType == SearchDisplayType.VerticalType ?  Search.selectRowkeys
                                                                    : Search.newTable.selectedRowKeysAllPages;
        return data;
    }

    getNewRightmenus = () =>{
        const {Search,} = this.props;
        let { rightMenus ,displayType } = Search;
        let newRightmenus:any = [];
        if (Search.type == 'advanced') {
            newRightmenus = [{
                key: '-1',
                content: getLabel(197, '搜索'),
                icon: <i className='icon-coms-search'/>
            }, {
                key: '-2',
                content: getLabel(2022, '重置'),
                icon: <i className=' icon-coms-Revoke'/>
            }, {
                key: '-3',
                content: getLabel(18418, '存为模板'),
                icon: <i className='icon-coms-task-list'/>
            }];
        } else {
            newRightmenus = rightMenus.map(m => {
                let expandBtn = "expandid_" + m.key + "span";
                if(displayType == SearchDisplayType.TreeType){
                    expandBtn = "expandid_" + m.key;
                }
                const searchData = this.getSearchData();
                let btnDisable = (Search.checkBtn == expandBtn && m.isfilter == '1' && (searchData.length < 1 || !searchData));
                return {
                    key: m.key,
                    content: m.name,
                    icon: <i className={m.icon}/>,
                    quickButton: m.quickButton,
                    disabled: btnDisable
                }
            });
        }
        return newRightmenus;
    }

    getFormStyle = ()=>{
        const {Search} = this.props;
        return Search.waterImg ? {
            height: '100%', backgroundAttachment: 'scroll', backgroundRepeat: 'repeat', width: "100%",
            backgroundImage: `url('${Search.waterImg}')`
        } : {};
    }

    leftStyle = ()=>{
           //#935375
        const {Search} = this.props;
        const {hasKeySearch, top } = Search;
        let tabs = top.tabs;
        let leftMargin ='10%';
        if(hasKeySearch){
            leftMargin = '289px';
        }
        if(tabs!=undefined && tabs.length>0){
            leftMargin = '289px';
        }
        return {
            width: "100%",
            paddingRight:leftMargin,
            boxSizing: "border-box"
        }
    }

    getWeaTabBtns =()=>{
        const {Search} = this.props;
        const btnarr:any = [];
        if(Search.isBackUpData && Search.isCoverType){
            btnarr.push(<Button type="primary" onClick={this.onClick}>{getLabel('589', '还原')}</Button>);
        }
        return btnarr
    }
    /***edittable分页事件 */
    /***exceltable分页事件 */
    excelPageChange = (current, pageSize)=>{
        const {Search} = this.props;
        Search.editPagination.onChange(current, pageSize);
    }

    excelPageShowSizeChange =(current, pageSize) => {
        const {Search} = this.props;
        Search.editPagination.onShowSizeChange(current, pageSize);
    }
    /***imgtable分页事件 */
    imgPageChange = (current, pageSize) => {
        const {Search} = this.props;
        Search.imgPageChaneg(current, pageSize)
    }

    imgPageShowSizeChange = (current, pageSize) => {
        const {Search} = this.props;
        Search.imgPageChaneg(current, pageSize)
    }

    /***mobxtable行点击事件 */
    normalTableRowClick = (record, index)=>{
        const {Search} = this.props;
        if(Object.keys(Search.rowClick).length==0){
            return;
        }
        let e:any=event||window.event;
        if(e&&e.srcElement&&e.srcElement.nodeName!='A'){
            Search.rowClickFun(record,e);
        }
    }

    showOrCloseExpand=()=>{
        const {Search} = this.props;
        if(Search.rightLayoutWidth.startsWith('0')){
            if(Search.rowClick['4'].width){
                Search.rightLayoutWidth=Search.rowClick['4'].width;
            }else{
                Search.rightLayoutWidth='35%';
            }
        }else{
            Search.rightLayoutWidth='0px';
        }
    }

    exportCancel = () => {
        const {Search} = this.props;
        Search.isClose = true;
        Search.showProgerss = false
    }

    getSearch = ()=>{
        const Search:any =this.props.Search||{};
        if(Search.rowClick['4'].hreftype=='3'){//如果右侧关联的是查询
            if(Search.search){
                return Search.search;
            }else{
                Search.update({search:new listStore()});
                Search.search.update({isInSearch:true,parentSearch:Search});
                return Search.search;
            }
        }else{
            return new listStore();
        }

    }
}

export default WeaTools.tryCatch(React,
    props => <WeaErrorPage msg={props.error ? props.error : '对不起，该页面异常，请联系管理员！'}/>,
    { error: '' }
)(List);